<!doctype html>



  


<html class="theme-next mist use-motion">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>



<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />












  
  
  <link href="/vendors/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />




  
  
  
  

  
    
    
  

  

  

  

  

  
    
    
    <link href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
  






<link href="/vendors/font-awesome/css/font-awesome.min.css?v=4.4.0" rel="stylesheet" type="text/css" />

<link href="/css/main.css?v=5.0.2" rel="stylesheet" type="text/css" />


  <meta name="keywords" content="前端,CSS,预处理语言,Sass,LESS,Stylus," />





  <link rel="alternate" href="/atom.xml" title="Zhanmin's blog" type="application/atom+xml" />




  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=5.0.2" />






<meta name="description" content="本文是博主在学习CSS预处理语言时，通过参考文档学习并对比了Sass、LESS、Stylus三者预处理语言，并对它们的背景、特性及使用方法进行了解和学习。希望给大家有所参考。">
<meta property="og:type" content="article">
<meta property="og:title" content="CSS预处理语言学习笔记">
<meta property="og:url" content="http://yoursite.com/2017/10/14/CSS预处理语言学习笔记/index.html">
<meta property="og:site_name" content="Zhanmin's blog">
<meta property="og:description" content="本文是博主在学习CSS预处理语言时，通过参考文档学习并对比了Sass、LESS、Stylus三者预处理语言，并对它们的背景、特性及使用方法进行了解和学习。希望给大家有所参考。">
<meta property="og:updated_time" content="2017-10-19T09:46:34.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="CSS预处理语言学习笔记">
<meta name="twitter:description" content="本文是博主在学习CSS预处理语言时，通过参考文档学习并对比了Sass、LESS、Stylus三者预处理语言，并对它们的背景、特性及使用方法进行了解和学习。希望给大家有所参考。">



<script type="text/javascript" id="hexo.configuration">
  var NexT = window.NexT || {};
  var CONFIG = {
    scheme: 'Mist',
    sidebar: {"position":"left","display":"post"},
    fancybox: true,
    motion: true,
    duoshuo: {
      userId: '0',
      author: '博主'
    }
  };
</script>




  <link rel="canonical" href="http://yoursite.com/2017/10/14/CSS预处理语言学习笔记/"/>


  <title> CSS预处理语言学习笔记 | Zhanmin's blog </title>
</head>

<body itemscope itemtype="//schema.org/WebPage" lang="zh-Hans">

  










  
  
    
  

  <div class="container one-collumn sidebar-position-left page-post-detail ">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="//schema.org/WPHeader">
      <div class="header-inner"><div class="site-meta ">
  

  <div class="custom-logo-site-title">
    <a href="/"  class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <span class="site-title">Zhanmin's blog</span>
      <span class="logo-line-after"><i></i></span>
    </a>
  </div>
  <p class="site-subtitle">拾金之路</p>
</div>

<div class="site-nav-toggle">
  <button>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
  </button>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br />
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br />
            
            分类
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
            
            归档
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
            
            标签
          </a>
        </li>
      

      
        <li class="menu-item menu-item-search">
          
            <a href="javascript:;" class="popup-trigger">
          
            
              <i class="menu-item-icon fa fa-search fa-fw"></i> <br />
            
            搜索
          </a>
        </li>
      
    </ul>
  

  
    <div class="site-search">
      
  <div class="popup">
 <span class="search-icon fa fa-search"></span>
 <input type="text" id="local-search-input">
 <div id="local-search-result"></div>
 <span class="popup-btn-close">close</span>
</div>


    </div>
  
</nav>

 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  
  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="//schema.org/Article">

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                CSS预处理语言学习笔记
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            <span class="post-meta-item-icon">
              <i class="fa fa-calendar-o"></i>
            </span>
            <span class="post-meta-item-text">发表于</span>
            <time itemprop="dateCreated" datetime="2017-10-14T13:18:29+08:00" content="2017-10-14">
              2017-10-14
            </time>
          </span>

          
            <span class="post-category" >
              &nbsp; | &nbsp;
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
              
                <span itemprop="about" itemscope itemtype="https://schema.org/Thing">
                  <a href="/categories/blog/" itemprop="url" rel="index">
                    <span itemprop="name">blog</span>
                  </a>
                </span>

                
                

              
            </span>
          

          
            
          

          

          
          

          
        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        <p>本文是博主在学习CSS预处理语言时，通过参考文档学习并对比了Sass、LESS、Stylus三者预处理语言，并对它们的背景、特性及使用方法进行了解和学习。希望给大家有所参考。</p>
<a id="more"></a>
<h2 id="CSS预处理"><a href="#CSS预处理" class="headerlink" title="CSS预处理"></a>CSS预处理</h2><h3 id="概念"><a href="#概念" class="headerlink" title="概念"></a>概念</h3><p>CSS(Cascading Style Sheet)被译为级联样式表，或称之”风格样式表”，主要用来进行网页风格设计。通过设立样式表，可以统一控制HTML中各标签的显示属性。如外观、位置、动效等。然而，它不是一种编程语言，仅仅是一行行单纯的属性描述，而没有自己的变量、常量、条件语句等编程语法。</p>
<p>因此，诞生了“CSS预处理器（CSS Preprocessor）”。</p>
<p>CSS预处理器——定义了一种新的语言，基本思想是用一种专门的编程语言，为CSS增加一些编程的特性，将CSS作为目标生成文件。</p>
<p>优点——使CSS更加简洁、适应性更强、可读性更加，更易于代码的维护等。</p>
<p>种类——Sass（SCSS）、LESS、Stylus、Turbine、Switch CSS、CSS Cacheer、DT CSS等。</p>
<h3 id="背景"><a href="#背景" class="headerlink" title="背景"></a>背景</h3><h4 id="Sass背景介绍"><a href="#Sass背景介绍" class="headerlink" title="Sass背景介绍"></a>Sass背景介绍</h4><p>Sass是对CSS的语法的一种扩充，诞生于2007年，最早最成熟的一款CSS预处理器语言，它可以使用变量、常量、嵌套、混入、函数等功能。然而它本身的语法不太容易让浏览器识别，所以需要编译出合法的CSS让浏览器使用。</p>
<p>两套语法：</p>
<ul>
<li>Sass作为后缀：用缩进作为分隔符来区分代码块</li>
<li>SCSS作为后缀（Sass3后都支持）:采用大括号（{}）作为分隔符</li>
</ul>
<h4 id="LESS背景介绍"><a href="#LESS背景介绍" class="headerlink" title="LESS背景介绍"></a>LESS背景介绍</h4><p>LESS是2009年的一个开源项目，受Sass影响较大，但又使用CSS的语法。提供多种方式能平滑的将写好的代码转化成标准的CSS代码。</p>
<h4 id="Stylus-背景介绍"><a href="#Stylus-背景介绍" class="headerlink" title="Stylus 背景介绍"></a>Stylus 背景介绍</h4><p>2010年产生，来自于Node.js社区，主要用来给Node项目进行CSS预处理支持。提供一个高效、动态和使用表达方式来生成CSS，以供浏览器使用。Stylus同时支持缩进和CSS常规样式书写规则。</p>
<h3 id="特性"><a href="#特性" class="headerlink" title="特性"></a>特性</h3><p>上面三种CSS预处理语言具有一些相同的特性，如变量、混入、嵌套、函数等。</p>
<h4 id="变量"><a href="#变量" class="headerlink" title="变量"></a>变量</h4><p>在CSS预处理器语言中可以声明变量，并在整个样式表中使用。</p>
<ol>
<li><p>Sass的变量</p>
<p>必须是“$”开头，后面紧跟变量名和变量值，且变量名和变量值之间用冒号（：）隔开，如下所示：</p>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line"><span class="variable">$mainColor</span>: <span class="number">#963</span>;</div><div class="line"><span class="variable">$sitWidth</span>: <span class="number">1024px</span>;</div><div class="line"><span class="variable">$borderStyle</span>: dotted;</div><div class="line"><span class="selector-tag">body</span>&#123;</div><div class="line">  <span class="attribute">color</span>: <span class="variable">$mainColor</span>;</div><div class="line">  <span class="attribute">border</span>: <span class="number">1px</span> <span class="variable">$borderStyle</span> <span class="variable">$mainColor</span>;</div><div class="line">  <span class="attribute">max-width</span>: <span class="variable">$siteWidth</span>;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
</li>
<li><p>LESS的变量</p>
<p>变量前面使用“@“字符开头</p>
<figure class="highlight less"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line"><span class="variable">@mainColor:</span> <span class="number">#963</span>;</div><div class="line"><span class="variable">@sitWidth:</span> <span class="number">1024px</span>;</div><div class="line"><span class="variable">@borderStyle:</span> dotted;</div><div class="line"><span class="selector-tag">body</span>&#123;</div><div class="line">  <span class="attribute">color</span>: <span class="variable">@mainColor</span>;</div><div class="line">  <span class="attribute">border</span>: <span class="number">1px</span> <span class="variable">@borderStyle</span> <span class="variable">@mainColor</span>;</div><div class="line">  <span class="attribute">max-width</span>: <span class="variable">@siteWidth</span>;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
</li>
<li><p>Stylus的变量</p>
<p>Stylus样式中声明变量没有限定，可以使用”$“符开始，结尾的（；）可有可无，但变量名和变量值之间的等号（=）是需要的。然而不能使用”@“符号开头来声明变量。</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line">mainColor = #963;</div><div class="line">sitWidth = 1024px;</div><div class="line">$borderStyle = dotted;</div><div class="line">body&#123;</div><div class="line">  color @mainColor;</div><div class="line">  border 1px $borderStyle mainColor;</div><div class="line">  max-width siteWidth;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<blockquote>
<p>Stylus还有一个独特功能，不需要分配值给变量就可以定义应用属性：</p>
</blockquote>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">position absolute</div><div class="line">top 50%</div><div class="line">left 50%;</div><div class="line">width w = 150px;</div><div class="line">height h = 80px;</div><div class="line">margin-left -(w/2)</div><div class="line">margin-top -(h/2)</div></pre></td></tr></table></figure>
</li>
</ol>
<h4 id="作用域（Scope）"><a href="#作用域（Scope）" class="headerlink" title="作用域（Scope）"></a>作用域（Scope）</h4><p>定义：顾名思义，Scope（指的是变量范围）即局部变量和全局变量的关系，查找变量的顺序是先在局部定义中找，如果找不到，则查找上级定义，直至全局。</p>
<p>目前Sass的作用域&amp;Less的作用域&amp;Stylus的作用域特性基本相同，都可以支持全局变量和局部变量，都会向上冒泡查找，直到根为止。</p>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line"><span class="variable">$color</span>: black;</div><div class="line"><span class="selector-class">.scoped</span>&#123;</div><div class="line">  <span class="variable">$bg</span>: blue;</div><div class="line">  <span class="variable">$color</span>: white;</div><div class="line">  <span class="attribute">color</span>: <span class="variable">$color</span>;</div><div class="line">  <span class="attribute">background-color</span>: <span class="variable">$bg</span>;</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.unscoped</span>&#123;</div><div class="line">  <span class="attribute">color</span>:<span class="variable">$color</span>;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>编译后：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="selector-class">.scoped</span> &#123;</div><div class="line">  <span class="attribute">color</span>: white;</div><div class="line">  <span class="attribute">background-color</span>: blue; &#125;</div><div class="line"></div><div class="line"><span class="selector-class">.unscoped</span> &#123;</div><div class="line">  <span class="attribute">color</span>: black; &#125;</div></pre></td></tr></table></figure>
<h4 id="混合（Mixins）"><a href="#混合（Mixins）" class="headerlink" title="混合（Mixins）"></a>混合（Mixins）</h4><p>Mixins是CSS预处理器语言中最强大的特性，即将一部分样式抽出，作为单独定义的模块，被很多选择器重复使用。</p>
<ol>
<li><p>Sass的混合</p>
<p>Sass样式中声明Mixins是需要使用”@mixin“，然后后面紧跟Mixins的名称，也可以定义参数，同时可以给这个参数设置一个默认值，但参数名是使用”$“符号开始；</p>
<p>调用Mixins时，需要使用”@include“，然后后面紧跟要调用的Mixins名称。</p>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line"><span class="comment">/* 声明一个Mixin 名称为”error“ */</span></div><div class="line">@<span class="keyword">mixin</span> error(<span class="variable">$borderWidth</span>:<span class="number">2px</span>)&#123;</div><div class="line">  <span class="attribute">border</span>:<span class="variable">$borderWidth</span> solid <span class="number">#f00</span>;</div><div class="line">  <span class="attribute">color</span>: <span class="number">#f00</span>;</div><div class="line">&#125;</div><div class="line"><span class="comment">/* 调用 error Mixins */</span></div><div class="line"><span class="selector-class">.generic-error</span> &#123;</div><div class="line">  @<span class="keyword">include</span> error();</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.login-error</span>&#123;</div><div class="line">  @<span class="keyword">include</span> error(<span class="number">5px</span>);<span class="comment">/* 调用 error Mixins，并将参数$borderWidth的值重定义为5px */</span></div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>​</p>
</li>
<li><p>LESS的混合</p>
<p>在LESS中，混合是指将定义好的”ClassA“引入另一个已经定义的”Class“，就像在当前的”Class“中增加一个属性。可以将Mixins看成是一个类选择器，当然Mixins也可以设置参数，并给参数设置默认值。且是以”@“开头。</p>
<figure class="highlight less"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line"><span class="comment">/* 声明一个Mixin 名称为”error“ */</span></div><div class="line"><span class="selector-class">.error</span>(<span class="variable">@borderWidth</span>:<span class="number">2px</span>)&#123;</div><div class="line">  <span class="attribute">border</span>:<span class="variable">@borderWidth</span> solid <span class="number">#f00</span>;</div><div class="line">  <span class="attribute">color</span>: <span class="number">#f00</span>;</div><div class="line">&#125;</div><div class="line"><span class="comment">/* 调用 error Mixins */</span></div><div class="line"><span class="selector-class">.generic-error</span> &#123;</div><div class="line">  <span class="selector-class">.error</span>();</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.login-error</span>&#123;</div><div class="line">  <span class="selector-class">.error</span>(<span class="number">5px</span>);<span class="comment">/* 调用 error Mixins，并将参数$borderWidth的值重定义为5px */</span></div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>​</p>
</li>
<li><p>Stylus的混合</p>
<p>Stylus中的混合和前两个CSS预处理器语言的混合略有不同，它可以不使用任何符号，就直接声明Mixins名，然后再定义参数和默认值之间用等号（=）来连接。</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line">/* 声明一个Mixin 名称为”error“ */</div><div class="line">error(borderWidth = 2px)&#123;</div><div class="line">  border:borderWidth solid #f00;</div><div class="line">  color: #f00;</div><div class="line">&#125;</div><div class="line">/* 调用 error Mixins */</div><div class="line">.generic-error &#123;</div><div class="line">  error();</div><div class="line">&#125;</div><div class="line">.login-error&#123;</div><div class="line">  error(5px);/* 调用 error Mixins，并将参数$borderWidth的值重定义为5px */</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>以上三种Mixin编译后：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"><span class="selector-class">.generic-error</span> &#123;</div><div class="line">  <span class="attribute">border</span>: <span class="number">2px</span> solid <span class="number">#f00</span>;</div><div class="line">  <span class="attribute">color</span>: <span class="number">#f00</span>; &#125;</div><div class="line"></div><div class="line"><span class="selector-class">.login-error</span> &#123;</div><div class="line">  <span class="attribute">border</span>: <span class="number">5px</span> solid <span class="number">#f00</span>;</div><div class="line">  <span class="attribute">color</span>: <span class="number">#f00</span>; &#125;</div></pre></td></tr></table></figure>
</li>
</ol>
<h4 id="嵌套（Nesting）"><a href="#嵌套（Nesting）" class="headerlink" title="嵌套（Nesting）"></a>嵌套（Nesting）</h4><p>CSS预处理语言中嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而减少代码量，并增加代码的可读性。</p>
<p>例如，当多个元素有一个相同的父元素时，可以使用嵌套特性，在父元素的大括号（{}）里写这些元素，也可以使用”&amp;“符号来引用父选择器，以上三种CSS预处理器语言都是相同语法。</p>
<figure class="highlight less"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line"><span class="selector-tag">section</span> &#123;</div><div class="line">  <span class="attribute">margin</span>: <span class="number">10px</span>;</div><div class="line">  <span class="selector-tag">nav</span> &#123;</div><div class="line">    <span class="attribute">height</span>: <span class="number">25px</span>;</div><div class="line">    <span class="selector-tag">a</span> &#123;</div><div class="line">      <span class="attribute">color</span>: <span class="number">#0982c1</span>;</div><div class="line">      <span class="selector-tag">&amp;</span><span class="selector-pseudo">:hover</span> &#123;</div><div class="line">        <span class="attribute">text-decoration</span>: underline;</div><div class="line">      &#125;</div><div class="line">    &#125;</div><div class="line">  &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<h4 id="继承"><a href="#继承" class="headerlink" title="继承"></a>继承</h4><p>CSS预处理器语言可以从一个选择器继承另一个选择器下的所有样式。</p>
<ol>
<li><p>Sass和Stylus的继承</p>
<p>Sass和Stylus的继承是把一个选择器的所有样式继承到另个选择器上，在继承另个选择器的样式时需要使用”@extend“开始，后面紧跟被继承的选择器。</p>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line"><span class="selector-class">.block</span>&#123;</div><div class="line">  <span class="attribute">margin</span>: <span class="number">10px</span> <span class="number">5px</span>;</div><div class="line">  <span class="attribute">padding</span>: <span class="number">2px</span>;</div><div class="line">&#125;</div><div class="line"><span class="selector-tag">p</span>&#123;</div><div class="line">  @<span class="keyword">extend</span> .block;</div><div class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#eee</span>;</div><div class="line">&#125;</div><div class="line"><span class="selector-tag">ul</span>,<span class="selector-tag">ol</span>&#123;</div><div class="line">  @<span class="keyword">extend</span> .block;</div><div class="line">  <span class="attribute">color</span>: <span class="number">#333</span>;</div><div class="line">  <span class="attribute">text-transform</span>: uppercase;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>编译后：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line"><span class="selector-class">.block</span>, <span class="selector-tag">p</span>, <span class="selector-tag">ul</span>, <span class="selector-tag">ol</span> &#123;</div><div class="line">  <span class="attribute">margin</span>: <span class="number">10px</span> <span class="number">5px</span>;</div><div class="line">  <span class="attribute">padding</span>: <span class="number">2px</span>; &#125;</div><div class="line"></div><div class="line"><span class="selector-tag">p</span> &#123;</div><div class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#eee</span>; &#125;</div><div class="line"></div><div class="line"><span class="selector-tag">ul</span>, <span class="selector-tag">ol</span> &#123;</div><div class="line">  <span class="attribute">color</span>: <span class="number">#333</span>;</div><div class="line">  <span class="attribute">text-transform</span>: uppercase; &#125;</div></pre></td></tr></table></figure>
<p>​</p>
</li>
<li><p>LESS的继承</p>
<p>LESS支持的继承和Stylus不同，不是在选择器上继承，而是将Mixins中的样式嵌套到每个选择器里面。该方式的缺点就是在每个选择器中会有重复的样式产生。</p>
<figure class="highlight less"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line"><span class="selector-class">.block</span>&#123;</div><div class="line">  <span class="attribute">margin</span>: <span class="number">10px</span> <span class="number">5px</span>;</div><div class="line">  <span class="attribute">padding</span>: <span class="number">2px</span>;</div><div class="line">&#125;</div><div class="line"><span class="selector-tag">p</span>&#123;</div><div class="line"> <span class="selector-class">.block</span>;</div><div class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#eee</span>;</div><div class="line">&#125;</div><div class="line"><span class="selector-tag">ul</span>,<span class="selector-tag">ol</span>&#123;</div><div class="line">  <span class="selector-class">.block</span>;</div><div class="line">  <span class="attribute">color</span>: <span class="number">#333</span>;</div><div class="line">  <span class="attribute">text-transform</span>: uppercase;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>编译后：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div></pre></td><td class="code"><pre><div class="line"><span class="selector-class">.block</span>&#123;</div><div class="line">  <span class="attribute">margin</span>: <span class="number">10px</span> <span class="number">5px</span>;</div><div class="line">  <span class="attribute">padding</span>: <span class="number">2px</span>;</div><div class="line">&#125;</div><div class="line"><span class="selector-tag">p</span>&#123;</div><div class="line">  <span class="attribute">margin</span>: <span class="number">10px</span> <span class="number">5px</span>;</div><div class="line">  <span class="attribute">padding</span>: <span class="number">2px</span>;</div><div class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#eee</span>;</div><div class="line">&#125;</div><div class="line"><span class="selector-tag">ul</span>,<span class="selector-tag">ol</span>&#123;</div><div class="line">  <span class="attribute">margin</span>: <span class="number">10px</span> <span class="number">5px</span>;</div><div class="line">  <span class="attribute">padding</span>: <span class="number">2px</span>;</div><div class="line">  <span class="attribute">color</span>: <span class="number">#333</span>;</div><div class="line">  <span class="attribute">text-transform</span>: uppercase;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>​</p>
</li>
</ol>
<h4 id="运算符"><a href="#运算符" class="headerlink" title="运算符"></a>运算符</h4><p>CSS预处理器语言的运算符特性就是对数值型的Value进行加减乘除四则运算；</p>
<figure class="highlight less"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="variable">@base_margin:</span> <span class="number">10px</span>;</div><div class="line"><span class="variable">@double_margin:</span> <span class="variable">@base_margin</span> * <span class="number">2</span>;</div><div class="line"><span class="variable">@full_page:</span> <span class="number">960px</span>;</div><div class="line"><span class="variable">@half_page:</span> <span class="variable">@full_page</span> / <span class="number">2</span>;</div><div class="line"><span class="variable">@quarter_page:</span> (<span class="variable">@full_page</span>/<span class="number">2</span>) / <span class="number">2</span>;</div></pre></td></tr></table></figure>
<p>而Sass在数字运算上要比LESS更专业，可以直接换算单位。Sass可以处理无法识别的度量单位，并将其输出。</p>
<p>Stylue的运算则是三者中最强大的一款，除了加减乘除，还有关系运算、逻辑运算等。</p>
<h4 id="颜色函数"><a href="#颜色函数" class="headerlink" title="颜色函数"></a>颜色函数</h4><p>颜色函数是CSS预处理语言中内置的颜色函数功能，这些功能可以对颜色进行处理，例如颜色的变亮、变暗、饱和度控制、色相控制，渐变色等处理。</p>
<ol>
<li><p>Sass颜色函数</p>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line">lighten(<span class="variable">$color</span>, 10%); <span class="comment">/* 返回的颜色在$color基础上变亮10% */</span></div><div class="line">darken(<span class="variable">$color</span>, 10%);  <span class="comment">/* 返回的颜色在$color基础上变暗10% */</span></div><div class="line">saturate(<span class="variable">$color</span>, 10%); <span class="comment">/* 返回的颜色在$color基础上饱和度增加10% */</span></div><div class="line">desaturate(<span class="variable">$color</span>, 10%); <span class="comment">/* 返回的颜色在$color基础上饱和度减少10% */</span></div><div class="line">grayscale(<span class="variable">$color</span>); <span class="comment">/* 返回$color的灰度色 */</span></div><div class="line">complement(<span class="variable">$color</span>); <span class="comment">/* 返回$color的补色 */</span></div><div class="line">invert(<span class="variable">$color</span>); <span class="comment">/* 返回$color的反向色 */</span></div><div class="line">mix(<span class="variable">$color1</span>,<span class="variable">$color2</span>,50%); <span class="comment">/* 返回$color1和$color2的50%混合色 */</span></div></pre></td></tr></table></figure>
<p>使用：</p>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="variable">$color</span>: <span class="number">#369</span>;</div><div class="line"><span class="selector-tag">h1</span> &#123;</div><div class="line"><span class="attribute">background</span>: darken(<span class="variable">$color</span>, <span class="number">10%</span>);</div><div class="line"><span class="attribute">border</span>: <span class="number">3px</span> solid lighten(<span class="variable">$color</span>,<span class="number">10%</span>);</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>​</p>
</li>
<li><p>LESS颜色函数</p>
<figure class="highlight less"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"><span class="selector-tag">lighten</span>(<span class="variable">@color</span>, <span class="number">10%</span>); <span class="comment">/* 返回的颜色在@color基础上变亮10% */</span></div><div class="line"><span class="selector-tag">darken</span>(<span class="variable">@color</span>, <span class="number">10%</span>);  <span class="comment">/* 返回的颜色在@color基础上变暗10% */</span></div><div class="line"><span class="selector-tag">saturate</span>(<span class="variable">@color</span>, <span class="number">10%</span>); <span class="comment">/* 返回的颜色在@color基础上饱和度增加10% */</span></div><div class="line"><span class="selector-tag">desaturate</span>(<span class="variable">@color</span>, <span class="number">10%</span>); <span class="comment">/* 返回的颜色在@color基础上饱和度减少10% */</span></div><div class="line"><span class="selector-tag">spin</span>(<span class="variable">@color</span>,<span class="number">10</span>);<span class="comment">/* 返回的颜色在@color基础上色调增加10 */</span></div><div class="line"><span class="selector-tag">spin</span>(<span class="variable">@color</span>,-<span class="number">10</span>); <span class="comment">/* 返回的颜色在@color基础上色调减少10 */</span></div><div class="line"><span class="selector-tag">mix</span>(<span class="variable">@color1</span>,<span class="variable">@color2</span>); <span class="comment">/* 返回@color1和@color2两者的混合色 */</span></div></pre></td></tr></table></figure>
<p>使用：</p>
<figure class="highlight less"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="variable">@color:</span> <span class="number">#369</span>;</div><div class="line"><span class="selector-tag">h1</span> &#123;</div><div class="line"><span class="attribute">background</span>: <span class="variable">@color</span>;</div><div class="line"><span class="attribute">border</span>: <span class="number">3px</span> solid lighten(<span class="variable">@color</span>,<span class="number">10%</span>);</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>​</p>
</li>
<li><p>Stylus颜色函数</p>
<figure class="highlight less"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="selector-tag">lighten</span>(color, <span class="number">10%</span>); <span class="comment">/* 返回的颜色在color基础上变亮10% */</span></div><div class="line"><span class="selector-tag">darken</span>(color, <span class="number">10%</span>);  <span class="comment">/* 返回的颜色在color基础上变暗10% */</span></div><div class="line"><span class="selector-tag">saturate</span>(color, <span class="number">10%</span>); <span class="comment">/* 返回的颜色在color基础上饱和度增加10% */</span></div><div class="line"><span class="selector-tag">desaturate</span>(color, <span class="number">10%</span>); <span class="comment">/* 返回的颜色在color基础上饱和度减少10% */</span></div></pre></td></tr></table></figure>
<p>使用：</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">color = #0982C1</div><div class="line">h1</div><div class="line">  background color</div><div class="line">  border 3px solid darken(color,50%)</div></pre></td></tr></table></figure>
</li>
</ol>
<h4 id="导入（Import）"><a href="#导入（Import）" class="headerlink" title="导入（Import）"></a>导入（Import）</h4><p>在CSS中，不怎么用@import来导入样式，因为这样做会增加http的请求。但是在CSS预处理器中的导入规则与CSS不同，它仅仅在语义上导入不同的文件，最终生成的还是一个CSS文件。</p>
<blockquote>
<p>注意： 导入文件中定义了变量，混合信息也会被引入到主样式文件中，因此要避免他们相互冲突。</p>
</blockquote>
<p>Sass 、 LESS 和 Stylus 的导入样式的方法都是一样的</p>
<p>如下所示：</p>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">@<span class="keyword">import</span> <span class="string">"defaultStyle/main.scss"</span>;</div></pre></td></tr></table></figure>
<h4 id="注释（Comment）"><a href="#注释（Comment）" class="headerlink" title="注释（Comment）"></a>注释（Comment）</h4><p>以上三种预处理语言都支持多行注释及单行注释</p>
<ol>
<li><p>多行注释</p>
<figure class="highlight less"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="comment">/*</span></div><div class="line"> *我是注释</div><div class="line">*/</div><div class="line"><span class="selector-tag">body</span></div><div class="line">  <span class="selector-tag">padding</span> <span class="selector-tag">5px</span></div></pre></td></tr></table></figure>
</li>
<li><p>单行注释</p>
<figure class="highlight less"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="comment">//我是注释</span></div><div class="line"><span class="variable">@mainColor</span>：<span class="number">#369</span>;<span class="comment">//定义主体颜色</span></div></pre></td></tr></table></figure>
</li>
<li><p>Stylus特殊的多行注释——多行缓冲注释。这种注释跟多行注释类似，不同之处在于始的时候，这里是”/*！”。这个相当于告诉Stylus压缩的时候这段无视直接输出。</p>
<figure class="highlight less"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="comment">/*!</span></div><div class="line">*给定数值合体</div><div class="line">*/</div><div class="line"><span class="selector-tag">add</span>(a, b)</div><div class="line">  <span class="selector-tag">a</span> + <span class="selector-tag">b</span></div></pre></td></tr></table></figure>
</li>
</ol>
<h3 id="高级应用"><a href="#高级应用" class="headerlink" title="高级应用"></a>高级应用</h3><h4 id="条件语句"><a href="#条件语句" class="headerlink" title="条件语句"></a>条件语句</h4><ol>
<li><p>Sass的条件语句</p>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="selector-tag">p</span> &#123;</div><div class="line">  @<span class="keyword">if</span> 1 + 1 == 2 &#123; <span class="attribute">border</span>: <span class="number">1px</span> solid;  &#125;</div><div class="line">  @<span class="keyword">if</span> 5 &lt; 3      &#123; <span class="attribute">border</span>: <span class="number">2px</span> dotted; &#125;</div><div class="line">  @<span class="keyword">if</span> null       &#123; <span class="attribute">border</span>: <span class="number">3px</span> double; &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>编译后：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="selector-tag">p</span> &#123;<span class="attribute">color</span>:green;&#125;</div></pre></td></tr></table></figure>
<p>也可以和<code>@else if</code>  或<code>@else</code>一起使用</p>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line"><span class="variable">$type</span>: monster;</div><div class="line"><span class="selector-tag">p</span> &#123;</div><div class="line">  @<span class="keyword">if</span> <span class="variable">$type</span> == ocean &#123;</div><div class="line">    <span class="attribute">color</span>: blue;</div><div class="line">  &#125; @<span class="keyword">else</span> if <span class="variable">$type</span> == matador &#123;</div><div class="line">    <span class="attribute">color</span>: red;</div><div class="line">  &#125; @<span class="keyword">else</span> if <span class="variable">$type</span> == monster &#123;</div><div class="line">    <span class="attribute">color</span>: green;</div><div class="line">  &#125; @<span class="keyword">else</span> &#123;</div><div class="line">    <span class="attribute">color</span>: black;</div><div class="line">  &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
</li>
<li><p>Stylus 的条件语句</p>
<p>Stylus的条件语句的使用和使用其他编程条件语句使用基本类似，不同的是它可以在样式中省略大括号{}</p>
<figure class="highlight less"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line"><span class="selector-tag">box</span>(x,y,margin = false)</div><div class="line">	<span class="selector-tag">padding</span> <span class="selector-tag">y</span> <span class="selector-tag">x</span></div><div class="line">	<span class="selector-tag">if</span> <span class="selector-tag">margin</span></div><div class="line">		<span class="selector-tag">margin</span> <span class="selector-tag">y</span> <span class="selector-tag">x</span></div><div class="line">	<span class="selector-tag">else</span></div><div class="line">		<span class="selector-tag">margin</span> <span class="selector-tag">0</span></div><div class="line"><span class="selector-tag">body</span></div><div class="line">	<span class="selector-tag">box</span>(<span class="number">5px</span>,<span class="number">10px</span>,true)</div></pre></td></tr></table></figure>
<p>Stylus还支持后缀条件语句。使用<code>if</code>和<code>unless</code>作为操作符，当右边表达式为真时执行左边的操作对象</p>
<figure class="highlight ruby"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">negative(n)</div><div class="line">  <span class="keyword">unless</span> n is a <span class="string">'unit'</span></div><div class="line">  	error(<span class="string">'无效数值'</span>)</div><div class="line">  <span class="keyword">if</span> n &lt; <span class="number">0</span></div><div class="line">  	yes</div><div class="line">  <span class="keyword">else</span></div><div class="line">   	no</div></pre></td></tr></table></figure>
<p>等价于：</p>
<figure class="highlight ruby"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">negative(n)</div><div class="line">	error(<span class="string">'无效数值'</span>) <span class="keyword">unless</span> n is a <span class="string">'unit'</span></div><div class="line">	<span class="keyword">return</span> yes <span class="keyword">if</span> n &lt; <span class="number">0</span></div><div class="line">	no</div></pre></td></tr></table></figure>
<p>​</p>
</li>
<li><p>LESS的条件语句</p>
<p>LESS的条件使用关键字“when”</p>
<figure class="highlight less"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line"><span class="selector-class">.mixin</span>(<span class="variable">@a</span>) <span class="keyword">when</span> (<span class="variable">@a</span> &gt;= <span class="number">10</span>) &#123;</div><div class="line">  <span class="attribute">background-color</span>: black;</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.mixin</span>(<span class="variable">@a</span>) <span class="keyword">when</span> (<span class="variable">@a</span> &lt; <span class="number">10</span>) &#123;</div><div class="line">  <span class="attribute">background-color</span>: white;</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.class1</span> &#123; <span class="selector-class">.mixin</span>(<span class="number">12</span>) &#125;</div><div class="line"><span class="selector-class">.class2</span> &#123; <span class="selector-class">.mixin</span>(<span class="number">6</span>) &#125;</div></pre></td></tr></table></figure>
<p>转义出来的CSS：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="selector-class">.class1</span> &#123;</div><div class="line">  <span class="attribute">background-color</span>: black;</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.class2</span> &#123;</div><div class="line">  <span class="attribute">background-color</span>: white;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>除了<code>when</code>、<code>&gt;、&lt;、=、&lt;=、&gt;=</code>，LESS还提供了很多类型检查函数来辅助条件表达式，例如<code>iscolor</code>、<code>isnumber</code>、<code>isstring</code>、<code>iskeyword</code>、<code>isurl</code>等。</p>
<figure class="highlight less"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line"><span class="selector-class">.mixin</span> (<span class="variable">@a</span>) <span class="keyword">when</span> (iscolor(<span class="variable">@a</span>)) &#123;</div><div class="line">  <span class="attribute">background-color</span>: black;</div><div class="line"> &#125;</div><div class="line"> <span class="selector-class">.mixin</span> (<span class="variable">@a</span>) <span class="keyword">when</span> (isnumber(<span class="variable">@a</span>)) &#123;</div><div class="line">  <span class="attribute">background-color</span>: white;</div><div class="line"> &#125;</div><div class="line"> <span class="selector-class">.class1</span> &#123; <span class="selector-class">.mixin</span>(red) &#125;</div><div class="line"> <span class="selector-class">.class2</span> &#123; <span class="selector-class">.mixin</span>(<span class="number">6</span>) &#125;</div></pre></td></tr></table></figure>
<p>此外，LESS还支持AND、OR以及NOT来组合条件表达式，而OR在LESS中并不是使用OR关键字，而是用“,”来表示OR的逻辑关系。</p>
<figure class="highlight less"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div></pre></td><td class="code"><pre><div class="line"><span class="selector-class">.smaller</span> (<span class="variable">@a</span>, <span class="variable">@b</span>) <span class="keyword">when</span> (<span class="variable">@a</span> &gt; <span class="variable">@b</span>) &#123;</div><div class="line">  <span class="attribute">background-color</span>: black;</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.math</span> (<span class="variable">@a</span>) <span class="keyword">when</span> (<span class="variable">@a</span> &gt; <span class="number">10</span>) <span class="keyword">and</span> (<span class="variable">@a</span> &lt; <span class="number">20</span>) &#123;</div><div class="line">  <span class="attribute">background-color</span>: red;</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.math</span> (<span class="variable">@a</span>) <span class="keyword">when</span> (<span class="variable">@a</span> &lt; <span class="number">10</span>)，(<span class="variable">@a</span> &gt; <span class="number">20</span>) &#123;</div><div class="line">  <span class="attribute">background-color</span>: blue;</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.math</span> (<span class="variable">@a</span>) <span class="keyword">when</span> <span class="keyword">not</span> (<span class="variable">@a</span> = <span class="number">10</span>)  &#123;</div><div class="line">  <span class="attribute">background-color</span>: yellow;</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.math</span> (<span class="variable">@a</span>) <span class="keyword">when</span> (<span class="variable">@a</span> = <span class="number">10</span>)  &#123;</div><div class="line">  <span class="attribute">background-color</span>: green;</div><div class="line">&#125;</div><div class="line"></div><div class="line"><span class="selector-class">.testSmall</span> &#123;<span class="selector-class">.smaller</span>(<span class="number">30</span>, <span class="number">10</span>) &#125;</div><div class="line"><span class="selector-class">.testMath1</span> &#123;<span class="selector-class">.math</span>(<span class="number">15</span>)&#125;</div><div class="line"><span class="selector-class">.testMath2</span> &#123;<span class="selector-class">.math</span>(<span class="number">7</span>)&#125;</div><div class="line"><span class="selector-class">.testMath3</span> &#123;<span class="selector-class">.math</span>(<span class="number">10</span>)&#125;</div></pre></td></tr></table></figure>
</li>
</ol>
<h4 id="循环语句"><a href="#循环语句" class="headerlink" title="循环语句"></a>循环语句</h4><ol>
<li><p>Sass的循环语句</p>
<ul>
<li><code>@for</code>语法——Sass中使用for循环需要使用<code>@for</code>,并且配合<code>from</code>和<code>through</code>一起使用，语法如下：</li>
</ul>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">@<span class="keyword">for</span> <span class="variable">$var</span> from &lt;start&gt; through &lt;end&gt; &#123;语句块&#125;</div></pre></td></tr></table></figure>
<p>​    例如：</p>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">@<span class="keyword">for</span> <span class="variable">$i</span> from 1 through 3 &#123;</div><div class="line">  <span class="selector-class">.item-</span>#&#123;<span class="variable">$i</span>&#125; &#123;</div><div class="line">    <span class="attribute">width</span>: <span class="number">2em</span> * <span class="variable">$i</span>;</div><div class="line">  &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>​    转义后：</p>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="selector-class">.item-1</span> &#123;  <span class="attribute">width</span>: <span class="number">2em</span>; &#125;</div><div class="line"><span class="selector-class">.item-2</span> &#123;  <span class="attribute">width</span>: <span class="number">4em</span>; &#125;</div><div class="line"><span class="selector-class">.item-3</span> &#123;  <span class="attribute">width</span>: <span class="number">6em</span>; &#125;</div></pre></td></tr></table></figure>
<ul>
<li><code>@each</code>语法：</li>
</ul>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">@<span class="keyword">each</span> <span class="variable">$var</span> in &lt;list&gt;&#123;语句块&#125;</div></pre></td></tr></table></figure>
<p>​    例如：</p>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">@<span class="keyword">each</span> <span class="variable">$animal</span> in puma,sea-slug,egret,salamander &#123;</div><div class="line">  .#&#123;<span class="variable">$animal</span>&#125;-<span class="attribute">icon</span> &#123;</div><div class="line">    <span class="attribute">background-image</span>: url(<span class="string">'/images/#&#123;$animal&#125;.png'</span>);</div><div class="line">  &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>​    转义出来：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="selector-class">.puma-icon</span> &#123;  <span class="attribute">background-image</span>: <span class="built_in">url</span>(<span class="string">'/images/puma.png'</span>); &#125;</div><div class="line"><span class="selector-class">.sea-slug-icon</span> &#123;  <span class="attribute">background-image</span>: <span class="built_in">url</span>(<span class="string">'/images/sea-slug.png'</span>); &#125;</div><div class="line"><span class="selector-class">.egret-icon</span> &#123;  <span class="attribute">background-image</span>: <span class="built_in">url</span>(<span class="string">'/images/egret.png'</span>); &#125;</div><div class="line"><span class="selector-class">.salamander-icon</span> &#123;  <span class="attribute">background-image</span>: <span class="built_in">url</span>(<span class="string">'/images/salamander.png'</span>)	&#125;</div></pre></td></tr></table></figure>
<ul>
<li><code>@while</code>语法:</li>
</ul>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="variable">$i</span>: <span class="number">6</span>;</div><div class="line">@<span class="keyword">while</span> <span class="variable">$i</span> &gt; 0 &#123;</div><div class="line">  <span class="selector-class">.item-</span>#&#123;<span class="variable">$i</span>&#125; &#123;<span class="attribute">width</span>: <span class="number">2em</span> * <span class="variable">$i</span>;&#125;</div><div class="line">  <span class="variable">$i</span>: <span class="variable">$i</span> - <span class="number">2</span>;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>转义：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="selector-class">.item-6</span> &#123;  <span class="attribute">width</span>: <span class="number">12em</span>; &#125;</div><div class="line"><span class="selector-class">.item-4</span> &#123;  <span class="attribute">width</span>: <span class="number">8em</span>; &#125;</div><div class="line"><span class="selector-class">.item-2</span> &#123;  <span class="attribute">width</span>: <span class="number">4em</span>; &#125;</div></pre></td></tr></table></figure>
<p>​</p>
</li>
<li><p>Stylus的循环语句</p>
<p>使用for/in表达式进行循环</p>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">for &lt;val-name&gt;<span class="selector-attr">[,&lt;key-name&gt;]</span> in &lt;expression&gt;</div></pre></td></tr></table></figure>
<p>例如：</p>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="selector-tag">body</span></div><div class="line">	for num in 1 2 3</div><div class="line">		foo num</div></pre></td></tr></table></figure>
<p>转义后：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="selector-tag">body</span>&#123;</div><div class="line">  <span class="attribute">foo</span>: <span class="number">1</span>;</div><div class="line">  <span class="attribute">foo</span>: <span class="number">2</span>;</div><div class="line">  <span class="attribute">foo</span>: <span class="number">3</span>;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>使用<code>key-name</code>：</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">body</div><div class="line">	fonts = Impact Arial sans-serif</div><div class="line">	for font, i in fonts</div><div class="line">		foo i font</div></pre></td></tr></table></figure>
<p>转义后：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="selector-tag">body</span> &#123;</div><div class="line">  <span class="attribute">foo </span>: <span class="number">0</span> Impact;</div><div class="line">  <span class="attribute">foo </span>: <span class="number">1</span> Arial;</div><div class="line">  <span class="attribute">foo </span>: <span class="number">2</span> sans-serif;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
</li>
<li><p>LESS的循环语句</p>
<p>在LESS语言中并没有现在的循环语句，可是像条件语句一样，通过when来模拟出循环功能。</p>
<figure class="highlight less"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line"><span class="selector-class">.loopingClass</span> (<span class="variable">@index</span>) <span class="keyword">when</span> (<span class="variable">@index</span> &gt; <span class="number">0</span>)&#123;</div><div class="line">  <span class="selector-class">.myclass</span> &#123;</div><div class="line">    <span class="attribute">z-index </span>: <span class="variable">@index</span>;</div><div class="line">  &#125;</div><div class="line">  <span class="comment">// 递归</span></div><div class="line">  <span class="selector-class">.loopingClass</span>(<span class="variable">@index</span> - <span class="number">1</span>);</div><div class="line">&#125;</div><div class="line"><span class="comment">// 停止循环</span></div><div class="line"><span class="selector-class">.loopingClass</span>(<span class="number">0</span>)&#123;&#125;</div><div class="line"><span class="comment">// 输出</span></div><div class="line"><span class="selector-class">.loopingClass</span>(<span class="number">3</span>);</div></pre></td></tr></table></figure>
<p>转义后：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="selector-class">.myclass</span> &#123;<span class="attribute">z-index</span>: <span class="number">3</span>;&#125;</div><div class="line"><span class="selector-class">.myclass</span> &#123;<span class="attribute">z-index</span>: <span class="number">2</span>;&#125;</div><div class="line"><span class="selector-class">.myclass</span> &#123;<span class="attribute">z-index</span>: <span class="number">1</span>;&#125;</div></pre></td></tr></table></figure>
<p>​</p>
</li>
</ol>
<h3 id="对比总结"><a href="#对比总结" class="headerlink" title="对比总结"></a>对比总结</h3><ul>
<li>三者都是开源项目；</li>
<li>Sass诞生是最早也是最成熟的CSS预处理器，有Ruby社区和Compass支持；Stylus早期服务器Node JS项目，在该社区得到一定支持者；LESS出现于2009年，支持者远超于Ruby和Node JS社区；</li>
<li>Sass和LESS语法较为严谨、严密，而Stylus语法相对散漫，其中LESS学习起来更快一些，因为他更像CSS的标准；</li>
<li>Sass和LESS相互影响较大，其中Sass受LESS影响，已经进化到了全面兼容CSS的SCSS；</li>
<li>Sass和LESS都有第三方工具提供转译，特别是Sass和Compass是绝配；</li>
<li>Sass、LESS和Stylus都具有变量、作用域、混合、嵌套、继承、运算符、颜色函数、导入和注释等基本特性，而且以“变量”、“混合”、“嵌套”、“继承”和“颜色函数”称为五大基本特性，各自特性实现功能基本相似，只是使用规则上有所不同；</li>
<li>Sass和Stylus具有类似于语言处理的能力，比如说条件语句、循环语句等，而LESS需要通过When等关键词模拟这些功能，在这一方面略逊一层；</li>
</ul>
<blockquote>
<p> 原文参考：<a href="http://www.w3cplus.com/css/css-preprocessor-sass-vs-less-stylus-2.html" target="_blank" rel="external">http://www.w3cplus.com/css/css-preprocessor-sass-vs-less-stylus-2.html</a></p>
</blockquote>

      
    </div>

    <div>
      
        

      
    </div>

    <div>
      
        

      
    </div>

    <footer class="post-footer">
      
        <div class="post-tags">
          
            <a href="/tags/前端/" rel="tag">#前端</a>
          
            <a href="/tags/CSS/" rel="tag">#CSS</a>
          
            <a href="/tags/预处理语言/" rel="tag">#预处理语言</a>
          
            <a href="/tags/Sass/" rel="tag">#Sass</a>
          
            <a href="/tags/LESS/" rel="tag">#LESS</a>
          
            <a href="/tags/Stylus/" rel="tag">#Stylus</a>
          
        </div>
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2017/08/14/D3.js学习笔记/" rel="next" title="D3.js学习笔记">
                <i class="fa fa-chevron-left"></i> D3.js学习笔记
              </a>
            
          </div>

          <div class="post-nav-prev post-nav-item">
            
          </div>
        </div>
      

      
      
    </footer>
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          
  <div class="comments" id="comments">
    
  </div>


        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap" >
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview sidebar-panel ">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="//schema.org/Person">
          <img class="site-author-image" itemprop="image"
               src="/images/avatar.jpg"
               alt="Zhanmin" />
          <p class="site-author-name" itemprop="name">Zhanmin</p>
          <p class="site-description motion-element" itemprop="description">一码年华，瑰宝永留存</p>
        </div>
        <nav class="site-state motion-element">
          <div class="site-state-item site-state-posts">
            <a href="/archives">
              <span class="site-state-item-count">6</span>
              <span class="site-state-item-name">日志</span>
            </a>
          </div>

          
            <div class="site-state-item site-state-categories">
              <a href="/categories">
                <span class="site-state-item-count">1</span>
                <span class="site-state-item-name">分类</span>
              </a>
            </div>
          

          
            <div class="site-state-item site-state-tags">
              <a href="/tags">
                <span class="site-state-item-count">11</span>
                <span class="site-state-item-name">标签</span>
              </a>
            </div>
          

        </nav>

        
          <div class="feed-link motion-element">
            <a href="/atom.xml" rel="alternate">
              <i class="fa fa-rss"></i>
              RSS
            </a>
          </div>
        

        <div class="links-of-author motion-element">
          
        </div>

        
        

        
        

      </section>

      
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">
            
              
            
            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#CSS预处理"><span class="nav-number">1.</span> <span class="nav-text">CSS预处理</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#概念"><span class="nav-number">1.1.</span> <span class="nav-text">概念</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#背景"><span class="nav-number">1.2.</span> <span class="nav-text">背景</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#Sass背景介绍"><span class="nav-number">1.2.1.</span> <span class="nav-text">Sass背景介绍</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#LESS背景介绍"><span class="nav-number">1.2.2.</span> <span class="nav-text">LESS背景介绍</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#Stylus-背景介绍"><span class="nav-number">1.2.3.</span> <span class="nav-text">Stylus 背景介绍</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#特性"><span class="nav-number">1.3.</span> <span class="nav-text">特性</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#变量"><span class="nav-number">1.3.1.</span> <span class="nav-text">变量</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#作用域（Scope）"><span class="nav-number">1.3.2.</span> <span class="nav-text">作用域（Scope）</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#混合（Mixins）"><span class="nav-number">1.3.3.</span> <span class="nav-text">混合（Mixins）</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#嵌套（Nesting）"><span class="nav-number">1.3.4.</span> <span class="nav-text">嵌套（Nesting）</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#继承"><span class="nav-number">1.3.5.</span> <span class="nav-text">继承</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#运算符"><span class="nav-number">1.3.6.</span> <span class="nav-text">运算符</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#颜色函数"><span class="nav-number">1.3.7.</span> <span class="nav-text">颜色函数</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#导入（Import）"><span class="nav-number">1.3.8.</span> <span class="nav-text">导入（Import）</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#注释（Comment）"><span class="nav-number">1.3.9.</span> <span class="nav-text">注释（Comment）</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#高级应用"><span class="nav-number">1.4.</span> <span class="nav-text">高级应用</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#条件语句"><span class="nav-number">1.4.1.</span> <span class="nav-text">条件语句</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#循环语句"><span class="nav-number">1.4.2.</span> <span class="nav-text">循环语句</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#对比总结"><span class="nav-number">1.5.</span> <span class="nav-text">对比总结</span></a></li></ol></li></ol></div>
            
          </div>
        </section>
      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright" >
  
  &copy; 
  <span itemprop="copyrightYear">2017</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">Zhanmin</span>
</div>

<div class="powered-by">
  由 <a class="theme-link" href="https://hexo.io">Hexo</a> 强力驱动
</div>

<div class="theme-info">
  主题 -
  <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">
    NexT.Mist
  </a>
</div>

        

        
      </div>
    </footer>

    <div class="back-to-top">
      <i class="fa fa-arrow-up"></i>
    </div>
  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  



  
  <script type="text/javascript" src="/vendors/jquery/index.js?v=2.1.3"></script>

  
  <script type="text/javascript" src="/vendors/fastclick/lib/fastclick.min.js?v=1.0.6"></script>

  
  <script type="text/javascript" src="/vendors/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>

  
  <script type="text/javascript" src="/vendors/velocity/velocity.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/vendors/velocity/velocity.ui.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/vendors/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.0.2"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.0.2"></script>



  
  

  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.0.2"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.0.2"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.0.2"></script>



  



  




  
  
  <script type="text/javascript">
    // Popup Window;
    var isfetched = false;
    // Search DB path;
    var search_path = "search.xml";
    if (search_path.length == 0) {
       search_path = "search.xml";
    }
    var path = "/" + search_path;
    // monitor main search box;

    function proceedsearch() {
      $("body").append('<div class="popoverlay">').css('overflow', 'hidden');
      $('.popup').toggle();

    }
    // search function;
    var searchFunc = function(path, search_id, content_id) {
    'use strict';
    $.ajax({
        url: path,
        dataType: "xml",
        async: true,
        success: function( xmlResponse ) {
            // get the contents from search data
            isfetched = true;
            $('.popup').detach().appendTo('.header-inner');
            var datas = $( "entry", xmlResponse ).map(function() {
                return {
                    title: $( "title", this ).text(),
                    content: $("content",this).text(),
                    url: $( "url" , this).text()
                };
            }).get();
            var $input = document.getElementById(search_id);
            var $resultContent = document.getElementById(content_id);
            $input.addEventListener('input', function(){
                var matchcounts = 0;
                var str='<ul class=\"search-result-list\">';
                var keywords = this.value.trim().toLowerCase().split(/[\s\-]+/);
                $resultContent.innerHTML = "";
                if (this.value.trim().length > 1) {
                // perform local searching
                datas.forEach(function(data) {
                    var isMatch = false;
                    var content_index = [];
                    var data_title = data.title.trim().toLowerCase();
                    var data_content = data.content.trim().replace(/<[^>]+>/g,"").toLowerCase();
                    var data_url = data.url;
                    var index_title = -1;
                    var index_content = -1;
                    var first_occur = -1;
                    // only match artiles with not empty titles and contents
                    if(data_title != '') {
                        keywords.forEach(function(keyword, i) {
                            index_title = data_title.indexOf(keyword);
                            index_content = data_content.indexOf(keyword);
                            if( index_title >= 0 || index_content >= 0 ){
                                isMatch = true;
								if (i == 0) {
                                    first_occur = index_content;
                                }
                            } 
							
                        });
                    }
                    // show search results
                    if (isMatch) {
                        matchcounts += 1;
                        str += "<li><a href='"+ data_url +"' class='search-result-title'>"+ data_title +"</a>";
                        var content = data.content.trim().replace(/<[^>]+>/g,"");
                        if (first_occur >= 0) {
                            // cut out 100 characters
                            var start = first_occur - 20;
                            var end = first_occur + 80;
                            if(start < 0){
                                start = 0;
                            }
                            if(start == 0){
                                end = 50;
                            }
                            if(end > content.length){
                                end = content.length;
                            }
                            var match_content = content.substring(start, end);
                            // highlight all keywords
                            keywords.forEach(function(keyword){
                                var regS = new RegExp(keyword, "gi");
                                match_content = match_content.replace(regS, "<b class=\"search-keyword\">"+keyword+"</b>");
                            });

                            str += "<p class=\"search-result\">" + match_content +"...</p>"
                        }
                        str += "</li>";
                    }
                })};
                str += "</ul>";
                if (matchcounts == 0) { str = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>' }
                if (keywords == "") { str = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>' }
                $resultContent.innerHTML = str;
            });
            proceedsearch();
        }
    });}

    // handle and trigger popup window;
    $('.popup-trigger').click(function(e) {
      e.stopPropagation();
      if (isfetched == false) {
        searchFunc(path, 'local-search-input', 'local-search-result');
      } else {
        proceedsearch();
      };

    });

    $('.popup-btn-close').click(function(e){
      $('.popup').hide();
      $(".popoverlay").remove();
      $('body').css('overflow', '');
    });
    $('.popup').click(function(e){
      e.stopPropagation();
    });
  </script>


  

  

  

  


</body>
</html>
